import React from 'react'
import {Link,withRouter} from 'react-router-dom'
import {Menu, Icon} from 'antd'

@withRouter
class CustomMenu extends React.Component {
  state = {
    openKeys: [],
    selectedKeys: []
  }

  componentDidMount() {
    const pathname = this.props.location.pathname
    const rank = pathname.split('/')
    switch (rank.length) {
      case 2 :
        this.setState({
          selectedKeys: [pathname]
        })
        break;
      case 5 :
        this.setState({
          selectedKeys: [pathname],
          openKeys: [rank.slice(0, 3).join('/'), rank.slice(0, 4).join('/')]
        })
        break;
      default :
        this.setState({
          selectedKeys: [pathname],
          openKeys: [pathname.substr(0, pathname.lastIndexOf('/'))]
        })
    }
  }

  componentWillReceiveProps(nextProps) {
    const pathname = nextProps.location.pathname
    if (this.props.location.pathname !== pathname) {
      this.setState({
        selectedKeys: [pathname],
      })
    }
  }

  onOpenChange = (openKeys) => {
    if (openKeys.length === 0 || openKeys.length === 1) {
      this.setState({
        openKeys
      })
      return
    }

    const latestOpenKey = openKeys[openKeys.length - 1]

    if (latestOpenKey.includes(openKeys[0])) {
      this.setState({
        openKeys
      })
    } else {
      this.setState({
        openKeys: [latestOpenKey]
      })
    }
  }

  renderMenuItem = ({PageUrl, icon, title,}) => {
    return (
      <Menu.Item key={PageUrl}>
        <Link to={PageUrl}>
          {icon && <Icon type={icon}/>}
          <span>{title}</span>
        </Link>
      </Menu.Item>
    )
  }
  renderSubMenu = ({PageUrl, icon, title, data}) => {
    return (
      <Menu.SubMenu key={PageUrl} title={<span>{icon && <Icon type={icon}/>}<span>{title}</span></span>}>
        {
            data && data.map(item => {
            return item.data && item.data.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
          })
        }
      </Menu.SubMenu>
    )
  }

    render() {
        const {openKeys, selectedKeys} = this.state
        return (
            <Menu
                onOpenChange={this.onOpenChange}
                onClick={({key}) => this.setState({selectedKeys: [key]})}
                openKeys={openKeys}
                selectedKeys={selectedKeys}
                theme={this.props.theme ? this.props.theme : 'dark'}
                mode='inline'>
                {
                    this.props.menus && this.props.menus.map(item => {
                        return item.data && item.data.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
                    })
                }
            </Menu>
        )
    }

  render2() {
    const {openKeys, selectedKeys} = this.state
    return (
      <Menu
        onOpenChange={this.onOpenChange}
        onClick={({key}) => this.setState({selectedKeys: [key]})}
        openKeys={openKeys}
        selectedKeys={selectedKeys}
        theme={this.props.theme ? this.props.theme : 'dark'}
        mode='inline'>
        {
          this.props.menus && this.props.menus.map(item => {
            return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
          })
        }
      </Menu>
    )
  }
}

export default CustomMenu
